<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
		  box-sizing: border-box;
		}
		body {
		  margin: 0;
		  background: #eaedf1;
		  font-family: 'Lato', sans-serif;
		}
		.header {
		  background: white;
		  padding: 30px;
		  text-align: center;
		}
		.header h1 {
		  font-weight: 300;
		  display: inline;
		}
		h2 {
		  color: #89867e;
		  text-align: center;
		  font-weight: 300;
		}
		.color {
		  width: 350px;
		  margin: 0 auto;
		}
		.color li {
		  margin: 0 15px 0 0;
		  width: 30px;
		  height: 30px;
		  display: inline-block;
		  border-radius: 100%;
		}
		.color .red    {background: #fa5a5a;}
		.color .yellow {background: #f0d264;}
		.color .green  {background: #82c8a0;}
		.color .cyan   {background: #7fccde;}
		.color .blue   {background: #6698cb;}
		.color .purple {background: #cb99c5;}
		
		.content, 
		.content-gradient, 
		.content-3d {
		  margin: 40px auto;
		}
		.content {
		  width: 80%;
		  max-width: 700px;
		}
		.content-3d {
		  width: 50%;
		  max-width: 300px;
		}
		pre {
		  width: 100%;
		  padding: 30px;
		  background-color: rgba(0, 0, 0, 0.72);
		  color: #f8f8f2;
		  border-radius: 0 0 4px 4px;
		  margin-top: 20px;
		  white-space: pre-wrap; /* css-3 */
		  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
		  white-space: -pre-wrap; /* Opera 4-6 */
		  white-space: -o-pre-wrap; /* Opera 7 */
		  word-wrap: break-word; /* Internet Explorer 5.5+ */
		}
		pre .bt  {color: #f8f8f2;} /* <> */
		pre .anc {color: #f92672;} /* anchor tag */
		pre .att {color: #a6a926;} /* attribute */
		pre .val {color: #e6db74;} /* value */
		
		.btn-container, .container {
		  background-color: white;
		  border-radius: 4px;
		  text-align: center;
		  margin-bottom: 40px;
		}
		.container h2 {
		  padding-top: 30px;
		  font-weight: 300;
		}
		.btn, .btn-two {
		  margin: 9px;
		}
		.btn-gradient {
		  margin: 5px;
		}
		a[class*="btn"] {text-decoration: none;}
		input[class*="btn"], 
		button[class*="btn"] {border: 0;}
		
		/* Here you can change the button sizes */
		.btn.large, 
		.btn-two.large, 
		.btn-effect.large {
		  padding: 20px 40px; 
		  font-size: 22px;
		}
		.btn.small, 
		.btn-two.small, 
		.btn-gradient.small, 
		.btn-effect.small {
		  padding: 8px 18px;  
		  font-size: 14px;
		}
		.btn.mini, 
		.btn-two.mini, 
		.btn-gradient.mini, 
		.btn-effect.mini {
		  padding: 4px 12px;  
		  font-size: 12px;
		}
		.btn.block, 
		.btn-two.block, 
		.btn-gradient.block, 
		.btn-effect.block {
		  display: block;
		  width: 60%;
		  margin-left: auto;
		  margin-right: auto;
		  text-align: center;
		}
		.btn-gradient.large {
		  padding: 15px 45px; 
		  font-size: 22px;
		}
		
		/* Colors for .btn and .btn-two */
		.btn.blue, .btn-two.blue     {background-color: #7fb1bf;}
		.btn.green, .btn-two.green   {background-color: #9abf7f;}
		.btn.red, .btn-two.red       {background-color: #fa5a5a;}
		.btn.purple, .btn-two.purple {background-color: #cb99c5;}
		.btn.cyan, .btn-two.cyan     {background-color: #7fccde;}
		.btn.yellow, .btn-two.yellow {background-color: #f0d264;}
		
		.rounded {
		  border-radius: 10px;
		}
		
		/* default button style */
		.btn {
		  position: relative;
		  border: 0;
		  padding: 15px 25px;
		  display: inline-block;
		  text-align: center;
		  color: white;
		}
		.btn:active {
		  top: 4px; 
		}
		
		/* color classes for .btn */
		.btn.blue {box-shadow: 0px 4px #74a3b0;}
		.btn.blue:active {box-shadow: 0 0 #74a3b0; background-color: #709CA8;}
		
		.btn.green {box-shadow: 0px 4px 0px #87a86f;}
		.btn.green:active {box-shadow: 0 0 #87a86f; background-color: #87a86f;}
		
		.btn.red {box-shadow:0px 4px 0px #E04342;}
		.btn.red:active {box-shadow: 0 0 #ff4c4b; background-color: #ff4c4b;}
		
		.btn.purple {box-shadow:0px 4px 0px #AD83A8;}
		.btn.purple:active {box-shadow: 0 0 #BA8CB5; background-color: #BA8CB5;}
		
		.btn.cyan {box-shadow:0px 4px 0px #73B9C9;}
		.btn.cyan:active {box-shadow: 0 0 #73B9C9; background-color: #70B4C4;}
		
		.btn.yellow {box-shadow:0px 4px 0px #D1B757;}
		.btn.yellow:active {box-shadow: 0 0 #ff4c4b; background-color: #D6BB59;}
		
		/* Button two - I have no creativity for names */
		.btn-two {
		  color: white; 
		  padding: 15px 25px;
		  display: inline-block;
		  border: 1px solid rgba(0,0,0,0.21);
		  border-bottom-color: rgba(0,0,0,0.34);
		  text-shadow:0 1px 0 rgba(0,0,0,0.15);
		  box-shadow: 0 1px 0 rgba(255,255,255,0.34) inset, 
		              0 2px 0 -1px rgba(0,0,0,0.13), 
		              0 3px 0 -1px rgba(0,0,0,0.08), 
		              0 3px 13px -1px rgba(0,0,0,0.21);
		}
		.btn-two:active {
		  top: 1px;
		  border-color: rgba(0,0,0,0.34) rgba(0,0,0,0.21) rgba(0,0,0,0.21);
		  box-shadow: 0 1px 0 rgba(255,255,255,0.89),0 1px rgba(0,0,0,0.05) inset;
		  position: relative;
		}
		/* 3D Button */
		.btn-3d {
		  position: relative;
		  display: inline-block;
		  font-size: 22px;
		  padding: 20px 60px;
		  color: white;
		  margin: 20px 10px 10px;
		  border-radius: 6px;
		  text-align: center;
		  transition: top .01s linear;
		  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
		}
		.btn-3d.red:hover    {background-color: #e74c3c;}
		.btn-3d.blue:hover   {background-color: #699DD1;}
		.btn-3d.green:hover  {background-color: #80C49D;}
		.btn-3d.purple:hover {background-color: #D19ECB;}
		.btn-3d.yellow:hover {background-color: #F0D264;}
		.btn-3d.cyan:hover   {background-color: #82D1E3;}
		
		.btn-3d:active {
		  top: 9px;
		}
		
		/* 3D button colors */
		.btn-3d.red {
		  background-color: #e74c3c;
		  box-shadow: 0 0 0 1px #c63702 inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 8px 0 0 #C24032,
		        0 8px 0 1px rgba(0,0,0,0.4),
		        0 8px 8px 1px rgba(0,0,0,0.5);
		}
		.btn-3d.red:active {
		  box-shadow: 0 0 0 1px #c63702 inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 0 0 1px rgba(0,0,0,0.4);
		}
		
		.btn-3d.blue {
		  background-color: #6DA2D9;
		  box-shadow: 0 0 0 1px #6698cb inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 8px 0 0 rgba(110, 164, 219, .7),
		        0 8px 0 1px rgba(0,0,0,.4),
		        0 8px 8px 1px rgba(0,0,0,0.5);
		}
		.btn-3d.blue:active {
		  box-shadow: 0 0 0 1px #6191C2 inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 0 0 1px rgba(0,0,0,0.4);
		}
		
		.btn-3d.green {
		  background-color: #82c8a0;
		  box-shadow: 0 0 0 1px #82c8a0 inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 8px 0 0 rgba(126, 194, 155, .7),
		        0 8px 0 1px rgba(0,0,0,.4),
		        0 8px 8px 1px rgba(0,0,0,0.5);
		}
		.btn-3d.green:active {
		  box-shadow: 0 0 0 1px #82c8a0 inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 0 0 1px rgba(0,0,0,0.4);
		}
		
		.btn-3d.purple {
		  background-color: #cb99c5;
		  box-shadow: 0 0 0 1px #cb99c5 inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 8px 0 0 rgba(189, 142, 183, .7),
		        0 8px 0 1px rgba(0,0,0,.4),
		        0 8px 8px 1px rgba(0,0,0,0.5);
		}
		.btn-3d.purple:active {
		  box-shadow: 0 0 0 1px #cb99c5 inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 0 0 1px rgba(0,0,0,0.4);
		}
		
		.btn-3d.cyan {
		  background-color: #7fccde;
		  box-shadow: 0 0 0 1px #7fccde inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 8px 0 0 rgba(102, 164, 178, .6),
		        0 8px 0 1px rgba(0,0,0,.4),
		        0 8px 8px 1px rgba(0,0,0,0.5);
		}
		.btn-3d.cyan:active {
		  box-shadow: 0 0 0 1px #7fccde inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 0 0 1px rgba(0,0,0,0.4);
		}
		
		.btn-3d.yellow {
		  background-color: #F0D264;
		  box-shadow: 0 0 0 1px #F0D264 inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 8px 0 0 rgba(196, 172, 83, .7),
		        0 8px 0 1px rgba(0,0,0,.4),
		        0 8px 8px 1px rgba(0,0,0,0.5);
		}
		.btn-3d.yellow:active {
		  box-shadow: 0 0 0 1px #F0D264 inset,
		        0 0 0 2px rgba(255,255,255,0.15) inset,
		        0 0 0 1px rgba(0,0,0,0.4);
		}
		
		/* Gradient buttons */
		.btn-gradient {
		  text-decoration: none;
		  color: white;
		  padding: 10px 30px;
		  display: inline-block;
		  position: relative;
		  border: 1px solid rgba(0,0,0,0.21);
		  border-bottom: 4px solid rgba(0,0,0,0.21);
		  border-radius: 4px;
		  text-shadow: 0 1px 0 rgba(0,0,0,0.15);
		}
		/* Gradient - ugly css is ugly */
		.btn-gradient.cyan {
		  background: rgba(27,188,194,1);
		  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(27,188,194,1)), to(rgba(24,163,168,1)));
		  background: -webkit-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
		  background: -moz-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
		  background: -o-linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
		  background: linear-gradient(rgba(27,188,194,1) 0%, rgba(24,163,168,1) 100%);
		  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1bbcc2', endColorstr='#18a3a8', GradientType=0);
		}
		
		.btn-gradient.red{ 
		  background: rgba(250,90,90,1);
		  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(250,90,90,1)), to(rgba(232,81,81,1)));
		  background: -webkit-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
		  background: -moz-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
		  background: -o-linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
		  background: linear-gradient(rgba(250,90,90,1) 0%, rgba(232,81,81,1) 100%);
		  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa5a5a', endColorstr='#e85151', GradientType=0 );
		}
		.btn-gradient.orange {
		  background: rgba(255,105,30,1);
		  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,105,30,1)), to(rgba(230,95,28,1)));
		  background: -webkit-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
		  background: -moz-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
		  background: -o-linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
		  background: linear-gradient(rgba(255,105,30,1) 0%, rgba(230,95,28,1) 100%);
		}
		.btn-gradient.blue {
		  background: rgba(102,152,203,1);
		  background: -moz-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
		  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(102,152,203,1)), color-stop(100%, rgba(92,138,184,1)));
		  background: -webkit-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
		  background: -o-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
		  background: -ms-linear-gradient(top, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
		  background: linear-gradient(to bottom, rgba(102,152,203,1) 0%, rgba(92,138,184,1) 100%);
		  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6698cb', endColorstr='#5c8ab8', GradientType=0 );
		}
		.btn-gradient.purple { 
		  background: rgba(203,153,197,1);
		  background: -moz-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
		  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(203,153,197,1)), color-stop(100%, rgba(181,134,176,1)));
		  background: -webkit-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
		  background: -o-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
		  background: -ms-linear-gradient(top, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
		  background: linear-gradient(to bottom, rgba(203,153,197,1) 0%, rgba(181,134,176,1) 100%);
		  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb99c5', endColorstr='#b586b0', GradientType=0 );
		}
		.btn-gradient.yellow {
		  background: rgba(240,210,100,1);
		  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(240,210,100,1)), to(rgba(229,201,96,1)));
		  background: -webkit-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
		  background: -moz-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
		  background: -o-linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
		  background: linear-gradient(rgba(240,210,100,1) 0%, rgba(229,201,96,1) 100%);
		  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0d264', endColorstr='#e5c960', GradientType=0 );
		}
		.btn-gradient.green {
		  background: rgba(130,200,160,1);
		  background: -moz-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
		  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(130,200,160,1)), color-stop(100%, rgba(130,199,158,1)));
		  background: -webkit-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
		  background: -o-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
		  background: -ms-linear-gradient(top, rgba(130,200,160,1) 0%, rgba(130,199,158,1) 100%);
		  background: linear-gradient(to bottom, rgba(130,200,160,1) 0%, rgba(124, 185, 149, 1) 100%);
		  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82c8a0', endColorstr='#82c79e', GradientType=0 );
		}
		
		.btn-gradient.red:active    {background: #E35252;}
		.btn-gradient.orange:active {background: #E8601B;}
		.btn-gradient.cyan:active   {background: #169499;}
		.btn-gradient.blue:active   {background: #608FBF;}
		.btn-gradient.purple:active {background: #BD8EB7;}
		.btn-gradient.yellow:active {background: #DBC05B;}
		.btn-gradient.green:active  {background: #72B08E;}
	</style>
	<body>
		<div class="header">
		  <h1>Gradient Buttons</h1>
		</div>
		<div class="content">
		  
		  <h2>Colors</h2>
		  <ul class="color">
		    <li class="green"></li>
		    <li class="blue"></li>
		    <li class="red"></li>     
		    <li class="purple"></li>
		    <li class="cyan"></li>
		    <li class="yellow"></li>
		  </ul>
		  <div class="container">
		    <h2>mini</h2>
		    <a href="#" class="btn-gradient cyan mini">Button</a>
		    <a href="#" class="btn-gradient orange mini">Button</a>
		    <a href="#" class="btn-gradient blue mini">Button</a>
		    <a href="#" class="btn-gradient purple mini">Button</a>
		    <a href="#" class="btn-gradient green mini">Button</a>
		    <a href="#" class="btn-gradient yellow mini">Button</a>
		    <a href="#" class="btn-gradient red mini">Button</a>
		
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red mini"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		  <div class="container">
		    <h2>small</h2>
		    <a href="#" class="btn-gradient cyan small">Button</a>
		    <a href="#" class="btn-gradient orange small">Button</a>
		    <a href="#" class="btn-gradient blue small">Button</a>
		    <a href="#" class="btn-gradient purple small">Button</a>
		    <a href="#" class="btn-gradient green small">Button</a>
		    <a href="#" class="btn-gradient yellow small">Button</a>
		    <a href="#" class="btn-gradient red small">Button</a>
		
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red small"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		  <div class="container">
		    <h2>normal</h2>
		    <a href="#" class="btn-gradient cyan">Button</a>
		    <a href="#" class="btn-gradient orange">Button</a>
		    <a href="#" class="btn-gradient blue">Button</a>
		    <a href="#" class="btn-gradient purple">Button</a>
		    <a href="#" class="btn-gradient green">Button</a>
		    <a href="#" class="btn-gradient yellow">Button</a>
		    <a href="#" class="btn-gradient red">Button</a>
		
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		  <div class="container">
		    <h2>large</h2>
		    <a href="#" class="btn-gradient cyan large">Button</a>
		    <a href="#" class="btn-gradient orange large">Button</a>
		    <a href="#" class="btn-gradient blue large">Button</a>
		    <a href="#" class="btn-gradient purple large">Button</a>
		    <a href="#" class="btn-gradient green large">Button</a>
		    <a href="#" class="btn-gradient yellow large">Button</a>
		    <a href="#" class="btn-gradient red large">Button</a>
		
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red large"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		  <div class="container">
		    <h2>block</h2>
		    <a href="#" class="btn-gradient cyan block">Block Button</a>
		    <a href="#" class="btn-gradient orange block">Block Button</a>
		    <a href="#" class="btn-gradient blue block">Block Button</a>
		    <a href="#" class="btn-gradient purple block">Block Button</a>
		    <a href="#" class="btn-gradient green block">Block Button</a>
		    <a href="#" class="btn-gradient yellow block">Block Button</a>
		    <a href="#" class="btn-gradient red block">Block Button</a>
		
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-gradient red block"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		</div>
		
		
		<div class="header">
		  <h1>.btn-two</h1>
		</div>
		<div class="content">
		<section>
		  <div class="container">
		    <h2>mini</h2>
		    <a href="#" class="btn-two green mini">Button</a>
		    <a href="#" class="btn-two blue mini">Button</a>
		    <a href="#" class="btn-two red mini">Button</a>
		    <a href="#" class="btn-two purple mini">Button</a>
		    <a href="#" class="btn-two cyan mini">Button</a>
		    <a href="#" class="btn-two yellow mini">Button</a>
		
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green mini"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		  <div class="container">
		    <h2>small</h2>
		    <a href="#" class="btn-two green small">Button</a>
		    <a href="#" class="btn-two blue small">Button</a>
		    <a href="#" class="btn-two red small">Button</a>
		    <a href="#" class="btn-two purple small">Button</a>
		    <a href="#" class="btn-two cyan small">Button</a>
		    <a href="#" class="btn-two yellow small">Button</a>
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green small"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		  <div class="container">
		    <h2>normal</h2>
		    <a href="#" class="btn-two green">Button</a>
		    <a href="#" class="btn-two blue">Button</a>
		    <a href="#" class="btn-two red">Button</a>
		    <a href="#" class="btn-two purple">Button</a>
		    <a href="#" class="btn-two cyan">Button</a>
		    <a href="#" class="btn-two yellow">Button</a>
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		  <div class="container">
		    <h2>large</h2>
		    <a href="#" class="btn-two green large">Button</a>
		    <a href="#" class="btn-two blue large">Button</a>
		    <a href="#" class="btn-two red large">Button</a>
		    <a href="#" class="btn-two purple large">Button</a>
		    <a href="#" class="btn-two cyan large">Button</a>
		    <a href="#" class="btn-two yellow large">Button</a>
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green large"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		
		  <div class="container">
		    <h2>rounded</h2>
		    <a href="#" class="btn-two green rounded">Button</a>
		    <a href="#" class="btn-two blue rounded">Button</a>
		    <a href="#" class="btn-two red rounded">Button</a>
		    <a href="#" class="btn-two purple rounded">Button</a>
		    <a href="#" class="btn-two cyan rounded">Button</a>
		    <a href="#" class="btn-two yellow rounded">Button</a>
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green rounded"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		  <div class="container">
		    <h2>block</h2>
		    <a href="#" class="btn-two green block">Button</a>
		    <a href="#" class="btn-two blue block">Button</a>
		    <a href="#" class="btn-two red block">Button</a>
		    <a href="#" class="btn-two purple block">Button</a>
		    <a href="#" class="btn-two cyan block">Button</a>
		    <a href="#" class="btn-two yellow block">Button</a>
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-two green block"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		</section>
		</div>
		
		<div class="header">
		  <h1>Default Buttons</h1>
		</div>
		<div class="content">
		  <section>
		
		  <div class="container">
		    <h2>mini</h2>
		    <a href="#" class="btn green mini">Button</a>
		    <a href="#" class="btn blue mini">Button</a>
		    <a href="#" class="btn red mini">Button</a>
		    <a href="#" class="btn purple mini">Button</a>
		    <a href="#" class="btn cyan mini">Button</a>
		    <a href="#" class="btn yellow mini">Button</a>
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green mini"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		
		  <div class="container">
		    <h2>small</h2>
		    <a href="#" class="btn green small">Button</a>
		    <a href="#" class="btn blue small">Button</a>
		    <a href="#" class="btn red small">Button</a>
		    <a href="#" class="btn purple small">Button</a>
		    <a href="#" class="btn cyan small">Button</a>
		    <a href="#" class="btn yellow small">Button</a>
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green small"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		
		  <div class="container">
		    <h2>normal</h2>
		    <a href="#" class="btn green">Button</a>
		    <a href="#" class="btn blue">Button</a>
		    <a href="#" class="btn red">Button</a>
		    <a href="#" class="btn purple">Button</a>
		    <a href="#" class="btn cyan">Button</a>
		    <a href="#" class="btn yellow">Button</a>
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		
		  <div class="container">
		    <h2>large</h2>
		    <a href="#" class="btn green large">Button</a>
		    <a href="#" class="btn blue large">Button</a>
		    <a href="#" class="btn red large">Button</a>
		    <a href="#" class="btn purple large">Button</a>
		    <a href="#" class="btn cyan large">Button</a>
		    <a href="#" class="btn yellow large">Button</a>
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green large"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		
		  <div class="container">
		    <h2>rounded</h2>
		    <a href="#" class="btn green rounded">Button</a>
		    <a href="#" class="btn blue rounded">Button</a>
		    <a href="#" class="btn red rounded">Button</a>
		    <a href="#" class="btn purple rounded">Button</a>
		    <a href="#" class="btn cyan rounded">Button</a>
		    <a href="#" class="btn yellow rounded">Button</a>
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn green rounded"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		
		  <div class="container">
		    <h2>block</h2>
		    <a href="#" class="btn green block">Button</a>
		    <a href="#" class="btn blue block">Button</a>
		    <a href="#" class="btn red block">Button</a>
		    <a href="#" class="btn purple block">Button</a>
		    <a href="#" class="btn cyan block">Button</a>
		    <a href="#" class="btn yellow block">Button</a>
		    <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d green"</span>>Button</<span class="anc">a</span>></pre>
		  </div>
		
		  </section>
		</div>
		
		
		<div class="header">
		  <h1>3D Buttons</h1>
		</div>
		<div class="content-3d">
		
		<div class="btn-container">
		  <a href="#" class="btn-3d green">Button</a>
		  <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d green"</span>>Button</<span class="anc">a</span>></pre>
		</div>
		
		<div class="btn-container">
		  <a href="#" class="btn-3d blue">Button</a>
		  <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d blue"</span>>Button</<span class="anc">a</span>></pre>
		</div>
		
		<div class="btn-container">
		  <a href="#" class="btn-3d red">Button</a>
		  <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d red"</span>>Button</<span class="anc">a</span>></pre>
		</div>
		
		<div class="btn-container">
		  <a href="#" class="btn-3d purple">Button</a>
		  <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d purple"</span>>Button</<span class="anc">a</span>></pre>
		</div>
		<div class="btn-container">
		  <a href="#" class="btn-3d cyan">Button</a>
		  <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d cyan"</span>>Button</<span class="anc">a</span>></pre>
		</div>
		<div class="btn-container">
		  <a href="#" class="btn-3d yellow">Button</a>
		  <pre><<span class="anc">a</span> <span class="att">href</span>=<span class="val">"#"</span> <span class="att">class</span>=<span class="val">"btn-3d yellow"</span>>Button</<span class="anc">a</span>></pre>
		</div>
		</div>
	</body>
	<script>
		document.querySelector('a').onclick=function(e){
			console.log(111)
			event.preventDefault(); 
		}
	</script>
</html>
